<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仪表板API测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        .stat-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .stat-title {
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
        }
        .stat-number {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-bottom: 4px;
        }
        .stat-change {
            font-size: 12px;
            color: #666;
        }
        .positive { color: #67c23a; }
        .negative { color: #f56c6c; }
        .api-response {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 15px;
            margin: 20px 0;
            font-family: monospace;
            white-space: pre-wrap;
            max-height: 400px;
            overflow-y: auto;
        }
        button {
            background: #409eff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 10px 5px;
        }
        button:hover {
            background: #337ecc;
        }
    </style>
</head>
<body>
    <h1>仪表板API测试页面</h1>
    
    <div class="card">
        <h2>API测试</h2>
        <button onclick="testDashboardAPI()">测试仪表板API</button>
        <button onclick="clearResults()">清除结果</button>
    </div>

    <div class="card">
        <h2>API响应数据</h2>
        <div id="apiResponse" class="api-response">点击"测试仪表板API"按钮查看数据...</div>
    </div>

    <div class="card">
        <h2>仪表板数据展示</h2>
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-title">今日订单</div>
                <div class="stat-number" id="todayOrders">-</div>
                <div class="stat-change">
                    <span id="orderChange" class="positive">-</span> 较昨日
                </div>
            </div>
            
            <div class="stat-card">
                <div class="stat-title">今日收入</div>
                <div class="stat-number" id="todayRevenue">-</div>
                <div class="stat-change">
                    <span id="revenueChange" class="positive">-</span> 较昨日
                </div>
            </div>
            
            <div class="stat-card">
                <div class="stat-title">新增用户</div>
                <div class="stat-number" id="newUsers">-</div>
                <div class="stat-change">
                    <span id="userChange" class="positive">-</span> 较昨日
                </div>
            </div>
            
            <div class="stat-card">
                <div class="stat-title">商品总数</div>
                <div class="stat-number" id="totalProducts">-</div>
                <div class="stat-change">
                    <span id="productChange" class="positive">-</span> 本月新增
                </div>
            </div>
        </div>
    </div>

    <script>
        async function testDashboardAPI() {
            try {
                const response = await fetch('http://localhost:8083/api/reports/dashboard');
                const data = await response.json();
                
                // 显示API响应
                document.getElementById('apiResponse').textContent = JSON.stringify(data, null, 2);
                
                // 更新仪表板数据
                if (data.code === 200 && data.data) {
                    const stats = data.data;
                    
                    // 更新统计数据
                    document.getElementById('todayOrders').textContent = stats.todayOrders || 0;
                    document.getElementById('todayRevenue').textContent = `¥${(stats.todayGmv || 0).toLocaleString()}`;
                    document.getElementById('newUsers').textContent = stats.yesterdayNewUsers || 0;
                    document.getElementById('totalProducts').textContent = stats.totalProducts || 0;
                    
                    // 更新变化百分比
                    updateChangeDisplay('orderChange', stats.orderChange, '订单数');
                    updateChangeDisplay('revenueChange', stats.revenueChange, '收入');
                    updateChangeDisplay('userChange', stats.userChange, '新增用户');
                    updateChangeDisplay('productChange', stats.productChange, '商品');
                }
            } catch (error) {
                document.getElementById('apiResponse').textContent = `API调用失败: ${error.message}`;
            }
        }
        
        function updateChangeDisplay(elementId, changeValue, label) {
            const element = document.getElementById(elementId);
            if (changeValue !== null && changeValue !== undefined) {
                const isPositive = changeValue >= 0;
                element.textContent = `${isPositive ? '+' : ''}${changeValue}%`;
                element.className = isPositive ? 'positive' : 'negative';
            } else {
                element.textContent = '0%';
                element.className = 'positive';
            }
        }
        
        function clearResults() {
            document.getElementById('apiResponse').textContent = '点击"测试仪表板API"按钮查看数据...';
            
            // 重置统计数据
            document.getElementById('todayOrders').textContent = '-';
            document.getElementById('todayRevenue').textContent = '-';
            document.getElementById('newUsers').textContent = '-';
            document.getElementById('totalProducts').textContent = '-';
            
            // 重置变化百分比
            ['orderChange', 'revenueChange', 'userChange', 'productChange'].forEach(id => {
                const element = document.getElementById(id);
                element.textContent = '-';
                element.className = 'positive';
            });
        }
    </script>
</body>
</html>
